import React, {useState} from 'react';
import {Row, Col, Empty} from 'antd';
import './index.styl';
import {useUpdateEffect} from 'ahooks';

import {roomMessageMap} from '~/page/liveMonitor/config.js';

export default ({data, title}) => {
    const [columnList, setColumnList] = useState([]);
    const [value, setValue] = useState([]);
    const {dashBoardId, unitId} = roomMessageMap.get(title);

    useUpdateEffect(() => {
        if (data && data[dashBoardId] && data[dashBoardId][unitId]) {
            setColumnList(data[dashBoardId][unitId].columnList || []);
            setValue(data[dashBoardId][unitId].value || []);
        }
    }, [data, dashBoardId, unitId]);

    return (
        <div className="teacher-detail">
            {
                columnList?.length > 0
                    ?
                    columnList?.map((item, index) => {
                        const {id, name} = item;
                        return (
                            <Row className={index === 0 && 'margin-top-8'} key={id}>
                                <Col span={8}>{name}：</Col>
                                <Col span={16}>{value[0][name]}</Col>
                            </Row>
                        );
                    })
                    : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            }
        </div>
    );
};
